<!DOCTYPE HTML>
	<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>欢迎登录</title>
		<style>
        body {
	       padding: 20px;
	       margin: 0 auto;
	       border-style: double;
	       width: 250px;
	       margin-top: 60px;
        }
        div{
        	text-align:center;
        	padding: 5px 0;
        }
        label{
        	text-align: right;
        	display: inline-block;
        	width: 100px;
        }
        </style>
		</head>
		<body>
			<div><h1>欢迎登录</h1></div>
			<div>
			<form>
				<div>
				<label for="username">用户:</label>
				<input type="text" value="" id="username" name="username" maxlength="16" size="16">
				</div>
				<div>
				<label for="password">密码:</label>
				<input type="password" value="" id="password" name="password" maxlength="16" size="16"> 
        		</div>
        		<div>
        		<label for="authcode">请输入验证码:</label>
        		<input type="text" id="authcode" name="authcode" value="" maxlength="4" size="16">
        		<label for="captcha_img">验证码:</label>
        		<img id="captcha_img" border='1' src='./captcha.php?r=php echo rand(); ?>' style="width:100px; height:25px" />
        		<br>
        		<a href="javascript:void(0)" onclick="document.getElementById('captcha_img').src='./captcha.php?r='+Math.random()">看不清?换一个</a>
        		</div>
        		<div><input type="button" onclick="checklogin()" value="登录"> </div>
        		<a href="register.php" title="没有账户？点击创建">没有账户?点击创建</a>
        	</form>
        	</div>
        	<script>
        	function checklogin() {
                var username = document.getElementById("username").value;
				var password = document.getElementById("password").value;
				var authcode = document.getElementById("authcode").value;
                var xhr = new XMLHttpRequest();

                var data="username="+username+"&password="+password+"&authcode="+authcode;
				var url = 'finduser.php';
				
				xhr.open("POST", url, true);
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4 && xhr.status == 200) {
						if(xhr.responseText == '1') {
							window.location.href = "welcome.php";
						}
						else if(xhr.responseText == '2'){
							alert("用户或密码错误");
							document.getElementById('captcha_img').src='./captcha.php?r='+Math.random();
						}
						else if(xhr.responseText == '0'){
							alert("用户和密码不能为空");
							document.getElementById('captcha_img').src='./captcha.php?r='+Math.random();
						}
						else{
							alert("验证码错误!");
							document.getElementById('captcha_img').src='./captcha.php?r='+Math.random();
						}
					}
				}
				xhr.send(data);
            }
            </script>
		</body>
	</html>